<template>
  <div class="alarm-history">
    <el-row style="paddingBottom: 0">
      <el-col :span="24">
        <dynForm :info-form="searchForm" :search-tags="searchTags" :select-list="selectList" label-width="120px">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch">
            {{ $t("search") }}
          </el-button>
        </dynForm>
      </el-col>
    </el-row>
    <div class="table-buttons">
      <el-button
        v-btnPermission:add
        type="primary"
        icon="el-icon-upload"
        @click="doExport"
      >{{ $t("export") }}
      </el-button>
    </div>
    <!-- 表单部分 -->
    <el-card shadow="never">
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <historyForm ref="historyForm"/>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import AlarmHistoryApi from '@/api/alarm/history'
import { eqpnamelist } from '@/api/equipment/eqpbase'
import { mapGetters } from 'vuex'
import historyForm from './components/AlarmHistoryForm'
export default {
  name: 'AlarmHistory',
  components: { historyForm },
  mixins: [mySetting],
  props: {},
  data() {
    return {
      trackinTime: null,
      searchForm: {},
      searchTags: [
        { label: this.$t('eqpId'), prop: 'eqpName', tag: 'DynSelect' },
        { label: this.$t('alarmId'), prop: 'alarmId', tag: 'DynInput' },
        { label: this.$t('description'), prop: 'description', tag: 'DynInput' },
        { label: this.$t('timeInterval'), prop: '', tag: 'Dyndaterange', event: (value) => {
          this.searchForm.startTime = Array.isArray(value) ? value[0] : null
          this.searchForm.endTime = Array.isArray(value) ? value[1] : null
        } }
      ],
      selectList: {},
      tableColumns: [
        // { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'eqpID', label: this.$t('eqpId') },
        { prop: 'alarmID', label: this.$t('alarmId') },
        { prop: 'alarmDesc', label: this.$t('description'), width: '320px' },
        { prop: 'alarmStartTime', label: this.$t('AlarmStartTime') },
        { prop: 'alarmEndTime', label: this.$t('AlarmEndTime') },
        { prop: 'isEqpAlarm', label: this.$t('IsSelfAlarm'), templete: (_scope) => {
          return (
            <el-switch
              v-model={_scope.row.isEqpAlarm}
              active-value={1}
              inactive-value={0}
              active-color={'#13ce66'}
              inactive-color={'#ff4949'}
              disabled/>
          )
        } },
        { prop: '', label: this.$t('viewDetail'), templete: (_scope) => {
          return (
            <el-button type='text' size='small'
              onClick={this.$refs.historyForm.handleOpen.bind(this, _scope.row.id)}>
              {this.$t('details')}
            </el-button>
          )
        } }
      ],
      tableLoading: true,
      operation: {
        label: this.$t('viewDetail'),
        isShow: true
      } // 操作项
    }
  },
  computed: {
    ...mapGetters(['baseApi'])
  },
  watch: {},
  created() {
    this.getEqpList()
    this.initList()
  },
  mounted() {},
  methods: {
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    async doExport() {
      const obj = {
        ...this.searchForm,
        ...this.listQuery,
        toexcel: 1
      }
      const res = await AlarmHistoryApi.getList(this.$clearNull(obj))
      if (res.code === 1) {
        window.location.href = this.baseApi + '/' + res.data
      } else {
        this.$betterTips(res)
      }
    },
    async initList() {
      const res = await AlarmHistoryApi.getList(this.$clearNull({ ...this.searchForm, ...this.listQuery }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    async getEqpList() {
      const res = await eqpnamelist()
      this.$set(this.selectList, 'eqpName', res.data)
    },
    getList(page) {
      this.listQuery = page
      this.initList()
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
</style>
